﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
	@Styles.Render("~/bootstrap")
	@Styles.Render("~/Content/css")

    @Scripts.Render("~/bundles/modernizr")
	@Scripts.Render("~/bundles/jquery")
	@Scripts.Render("~/bundles/bootstrap")
</head>
<body>
    <header>
        <div class="navbar-wrapper">
            <div class="container">

                <div class="navbar navbar-inverse navbar-static-top">
                    <div class="container">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                        </div>
                        <div class="navbar-collapse collapse">
                            <ul class="nav navbar-nav">
                                <li data-bind="css: { active: isOnHome }"><a class="navbar-brand" href="/">BitShuva</a></li>
                                <li data-bind="css: { active: isOnExamples }"><a href="/examples">What it looks like</a></li>
                                <li data-bind="css: { active: isOnHowItWorks }"><a href="/howitworks">How it works</a></li>
                                <li><a href="#signUpDialog" data-toggle="modal">Try It</a></li>
                            </ul>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </header>
    
    <!-- Modal -->
    <div id="signUpDialog" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">You made the right choice</h4>
                </div>
                <div class="modal-body">
                    <div data-bind="visible: !alreadySignedUp()">
                        <p>Ready to have your own radio station? Awesome. (You rock.) Grab an invite and we'll follow up with you.</p>
                        <div>
                            <input id="email" type="text" class="form-control" data-bind="value: email, valueUpdate: 'afterkeydown'" name="invite[email]" placeholder="Email address" />
                            <br />
                            <textarea id="description" class="form-control" data-bind="value: description" name="invite[description]" placeholder="Tell us about your radio station"></textarea>
                        </div>
                    </div>

                    <p data-bind="visible: alreadySignedUp">Congrats - you're in! We'll contact you shortly.</p>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary" data-bind="visible: !$data.alreadySignedUp(), click: signUp, enable: isValidEmailAndDescription">Get Invite</button>
                    <button class="btn btn-primary" data-dismiss="modal" data-bind="visible: alreadySignedUp">OK!</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.2.0/knockout-min.js" type="text/javascript"></script>
    <script>

        $(function () {
            
            var vm = {
                email: ko.observable(),
                description: ko.observable(),
                alreadySignedUp: ko.observable(false),
                isOnHome: ko.observable(false),
                isOnExamples: ko.observable(false),
                isOnHowItWorks: ko.observable(false),

                signUp: function () {
                    $.post("/home/invitationSignUp?email=" + vm.email() + "&description=" + vm.description());
                    setTimeout(function () { vm.alreadySignedUp(true); }, 300);

                }
            };

            vm.isValidEmailAndDescription = ko.computed(function () { return vm.email() && vm.email().indexOf('@@') > 0; });
            window.bitshuvaVm = vm;
            ko.applyBindings(vm);
        });

    </script>
    @RenderBody()
    @RenderSection("scripts", required: false)


	<footer class="section" id="footer" role="contentinfo">
	    <div class="container">
		    <div class="row">
			    <div class="col-md-6">
				    <h3>Contact us</h3>
				    <p>
					    Questions? We're all ears.
				    </p>
				    <ul class="icons">
					    <li>
						    <i class="icon-envelope"></i>
						    <a href="mailto:contact@bitshuva.com">contact@bitshuva.com</a>
					    </li>
					    <li>
						    <i class="icon-twitter"></i>
						    <a href="http://twitter.com/bitshuva/" target="_blank">@@bitshuva</a>
					    </li>
					    <li>
						    <i class="icon-phone"></i>
                            <a href="tel:+16124242819">612-424-2819</a>
					    </li>
				    </ul>
			    </div>
			    <div class="col-md-6">
				    <h3>Recent news</h3>
				    <ul class="icons">
					    <li>
						    <p><i class="icon-twitter"></i>We're in beta, and we'd love your feedback.
							    <small>
								    <a href="http://twitter.com/bitshuva">@@bitshuva</a>
							    </small>
						    </p>
					    </li>
                        <li>
                            <a href="http://blog.bitshuva.com">BitShuva blog</a>
                        </li>
				    </ul>
			    </div>
		    </div>
	    </div>
    </footer>
</body>
</html>
